import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import PatientInformation from "@/components/ViewComponents/PatientInformation";
import { useState } from "react";
import { Tabs } from "antd";
import DepositDetails from "./components/depositDetails";
import "./index.less";
import AddDeposit from "./components/addDeposit";
import { useTranslation } from "react-i18next";
const index = (props: { register: Fn }) => {
	const { t } = useTranslation();
	const en_vi = "Hospitalization.Hospitalization.depositHistory";
	const [record, setRecord] = useState<any>({});
	const [page, setPage] = useState("1");
	const setPageFn = (key: any) => {
		setPage(key);
	};
	const items = [
		{
			label: t(`${en_vi}.depositRecord`),
			key: "1",
			children: <DepositDetails patientId={record.patientId} page={page}></DepositDetails>
		},
		{
			label: t(`${en_vi}.addDeposit`),
			key: "2",
			children: <AddDeposit record={record} setPageFn={setPageFn}></AddDeposit>
		}
	];

	const [registerDrawer, { closeDrawer }] = useDrawerInner(props.register, async data => {
		setRecord(data.record);
	});
	const handleChange = (key: any) => {
		console.log(key);
		setPage(key);
	};
	const closeFn = () => {
		setRecord({});
	};
	const handleSubmit = async () => {
		console.log(123);
		return;
		closeDrawer();
	};
	return (
		<BasicDrawer showFooter={false} size="large" {...props} close={closeFn} register={registerDrawer} ok={handleSubmit}>
			<div className="deposit-history">
				<div className="patientInformation">
					<PatientInformation patCardno={record.patCardno} isSearch={false} descriptionColumn={2} />
				</div>
				<Tabs defaultActiveKey="1" activeKey={page} onChange={handleChange} items={items}></Tabs>
			</div>
		</BasicDrawer>
	);
};
export default index;
